<template>
  <div id="app">
    <router-view/>
    <div v-show="overlay" class="overlay">
      请旋转屏幕
    </div>
  </div>
</template>

<script>
export default {
  name: 'App',
  data () {
    return {
      overlay:false
    }
  },
  beforeCreate () {
    let _this = this;
    var init = function(){
        var updateOrientation = function(){
            var orientation = window.orientation;
            switch(orientation){
                case 90:
                case -90:
                    orientation = 'landscape'; //这里是横屏
                    _this.overlay = false;
                    break;
                default:
                    orientation = 'portrait';  //这里是竖屏
                    _this.overlay = true;
                    break;
            }
 
            //html根据不同的旋转状态，加上不同的class，横屏加上landscape，竖屏
            //加上portrait
            document.body.parentNode.setAttribute('class',orientation);
        };
 
        // 每次旋转，调用这个事件。
        window.addEventListener('orientationchange',updateOrientation,false);
 
        // 事件的初始化
        updateOrientation();
    };
 
    window.addEventListener('DOMContentLoaded',init,false);
  }
}
</script>

<style lang="scss">
#app {
  width: 100%;
  height: 100%;
  overflow-y: hidden;
  .overlay{
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: #00000050;
    color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>
